<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript"	src="<c:url value="/assets/js/ezops/dashboard.js" />"></script>
<script type="text/javascript">
		// Add jS Dropdown plugin
		
		$(document).ready(function(){
			 /**
		        * To handle left menu toggle on page load
		        */
		   	//$('#clientonboarding_li').addClass('root-level has-sub opened');
		   	//$('#clientonboarding_li_ul').toggle('click').addClass('visible');
		   	//$('#clientonboarding_li_ul').attr('style','');
		    $('#dashboard_li').attr('style','font-weight: bold;');		
		});

		$(document).ready(function(){
		/*------------------------------------------------------------------------------------------
		 *------------------------------------KNOCKOUT CODE STARTS----------------------------------
		 *--------------------------------------------------------------------------------------------
		 */
		var model = model || {};
		var loginUser = ko.observable("");
		//------------------------------------Page Resource Model -------------------------------------

		model.pageData = function(data) {
			var self = this;

			self.resourceId = ko.observable(data.resourceId);
			self.resourceType = ko.observable(data.resourceType);
			self.groupId = ko.observable(data.groupId);
			self.fileName = ko.observable(data.fileName);

			return self;
		};

		//------------------------------------Report Model -------------------------------------

		model.reportData = function(data) {
			var self = this;
			//self.reportId = ko.observable(data.reportId);
			//self.fileName = ko.observable(data.fileName);
			self.category = ko.observable(data.category);
			self.reportDesc = ko.computed(function() {
				var reportType = null;
				switch (data.category) {
				case 'pl':
					reportType = "P&L Summary";
					break;
				case 'recon':
					reportType = "Reconciliation";
					break;
				case 'var':
					reportType = "Var";
					break;
				case 'risk':
					reportType = "Risk";
					break;
				case 'acct':
					reportType = "Accounting";
					break;
				case 'cash':
					reportType = "Cash";
					break;
				case 'trade':
					reportType = "Trade Report";
					break;
				case 'aging':
					reportType = "Aging Report";
					break;
				case 'poscp':
					reportType = "Positions by CP";
					break;
				case 'posprd':
					reportType = "Positions by Product";
					break;
				case 'investor':
					reportType = "Investor Report";
					break;
				case 'poscurr':
					reportType = "Positions by Currency";
					break;
				case 'tradefailures':
					reportType = "Trade Failures";
					break;
				case 'cashbyclearer':
					reportType = "Cash By Clearer";
					break;
				case 'cashdailychange':
					reportType = "Cash Daily Change";
					break;
				case 'cashupcoming':
					reportType = "Cash Upcoming";
					break;
				case 'riskcashflow':
					reportType = "Risk Cash Flow";
					break;
				case 'masteraggr':
					reportType = "Master Agreement";
					break;
				default:
					reportType = "Report";
				}
				return reportType;
			});

			/*self.fileData = ko.observable(data.fileData);
			self.fileLocation = ko.computed(function() {
				return data.fileLocation.replace(/\\/g, "/");
			});
			self.groupId = ko.observable(data.groupId);
			self.asOfDate = ko.computed(function() {

				var date = new Date();
				date.setTime(ko.toJS(data.asOfDate));

				return (date.getMonth() + 1) + "/" + date.getDate() + "/"
						+ date.getFullYear();

			});*/

			return self;
		};

		//------------------------------------Group Model -------------------------------------
		model.groupData = function(data) {
			var self = this;

			self.groupId = ko.observable(data.groupId);
			self.groupName = ko.observable(data.groupName);
			self.parentGroupId = ko.observable(data.parentGroupId);

			return self;
		};

		//-------------------------------------Functions Definitions---------------------------
		model.dashboardFunctions = function() {
			asOfDate = ko.observable();
			groupList = ko.observableArray();
			pageList = ko.observableArray();
			reportListAll = ko.observableArray();
			reportList = ko.observableArray();
			reportCheck = ko.observable({
				'pl' : ko.observable(true),
				'var' : ko.observable(true),
				'acct' : ko.observable(true),
				'cash' : ko.observable(true),
				'recon' : ko.observable(true),
				'coll' : ko.observable(true),
				'aging' : ko.observable(true),
				'poscp' : ko.observable(true),
				'posprd' : ko.observable(true),
				'trade' : ko.observable(true),
				'risk' : ko.observable(true),
				'investor' : ko.observable(true),
				'poscurr' : ko.observable(true),
				'tradefailures' : ko.observable(true),
				'cashbyclearer' : ko.observable(true),
				'cashdailychange' : ko.observable(true),
				'cashupcoming' : ko.observable(true),
				'riskcashflow' : ko.observable(true),
				'masteraggr' : ko.observable(true)
			});

					openPdf = function(data) {

						window.open("<c:url value='assets/sampledata/"
								+ ko.toJS(data.fileName) + "' />", '_blank',
								'fullscreen=yes');

					},
					getAllReport = function() {
						var dateRange = new String($("#dateRange").val());
						var dates = dateRange.split(" to ");

						//console.log(">>" + dates[0] + "<<");
						//console.log(">>" + dates[1] + "<<");

						var cat = null;//" " ; //--p1
						$.ajax({
							url : ezopsContextPath
									+ '/getAllReportIds/${userId}/' + cat + '/'
									+ dates[0] + '/' + dates[1],
							type : 'GET',
							dataType : 'json',
							success : function(data) {
								
								var mappedData = $.map(data, function(row) {

									return new model.reportData(row);
								});

								reportListAll(mappedData);
								//console.log(ko.toJSON(reportListAll));

							},
							error : function(data) {

								console.log("Error Response Text : " + data);

							}

						});

					},

					onLoad = function() {

						loginUser('${userId}');
						//console.log(ko.toJS(loginUser));
						console
								.log("-------------------------Getting Lists-------------------------");

						//-----ajax request to fetch Page list--------------------

						$.ajax({
							url : ezopsContextPath
									+ '/userResources/${userId}/Page',
							type : 'GET',
							dataType : 'json',
							success : function(data) {

								var mappedData = $.map(data, function(row) {

									return new model.pageData(row);
								});

								pageList(mappedData);

							},
							error : function(data) {

								console.log("Error Response Text : " + data);

							}

						});

						//-----ajax request to fetch Reports list--------------------
						var cat = null;//" " ; //--p1
						$.ajax({
							url : ezopsContextPath + '/getReportIds/${userId}/'
									+ cat,
							type : 'GET',
							dataType : 'json',
							success : function(data) {
//var i=0;
//console.log("data**"+ko.toJSON(data));
var data =[
	{ "reportDesc": "Position By CP", "category": "poscp" },
	{ "reportDesc": "Position By AccountType", "category": "posprd" },
	{ "reportDesc": "Position By Currency", "category": "poscurr" },
	{ "reportDesc": "Master Agreement", "category": "masteraggr" },
	{ "reportDesc": "Risk Cash Flow", "category": "riskcashflow" },
	{ "reportDesc": "Cash Upcoming", "category": "cashupcoming" },
	{ "reportDesc": "Cash By Clearer", "category": "cashbyclearer" },
	{ "reportDesc": "Cash Daily Change", "category": "cashdailychange" },
	{ "reportDesc": "Aging", "category": "aging" },
	{ "reportDesc": "Trade Failures", "category": "tradefailures" }
	/*{ "reportDesc": "P&L Summary", "category": "pl" }, 
	{ "reportDesc": "Var", "category": "var" },
	{ "reportDesc": "Accounting", "category": "acct" },
	{ "reportDesc": "Cash", "category": "cash" },
	{ "reportDesc": "Reconciliation", "category": "recon" },
	{ "reportDesc": "Collateral", "category": "coll" },
	{ "reportDesc": "Trade Report", "category": "trade" },
	{ "reportDesc": "Risk", "category": "risk" },
	{ "reportDesc": "Investor Report", "category": "investor" } */];
								var mappedData = $.map(data, function(row) {
									i++;
									//console.log(ko.toJSON(row)+","+i);
									return new model.reportData(row);
								});
								//console.log("mappedData #### "+ko.toJSON(mappedData));
								reportList(mappedData);
								//console.log('reportList###'+ ko.toJSON(reportList));
								asOfDate(ko.toJS(reportList()[0].asOfDate));
								//console.log(ko.toJS(asOfDate));
								setTimeout(function() {

									$("#sortable").sortable();
									$("#sortable").disableSelection();

								}, 500);

							},
							error : function(data) {

								console.log("Error Response Text : " + data);

							}

						});

						//-----ajax request to fetch GROUP list--------------------
						$.ajax({
							url : ezopsContextPath + '/getAllGroups',
							type : 'GET',
							dataType : 'json',
							success : function(data) {

								var mappedData = $.map(data, function(row) {

									return new model.groupData(row);
								});

								groupList(mappedData);
							},
							error : function(data) {
								//console.log("Error Response Text : " + data);
							}
						});
					};
			return {
				onLoad : onLoad,
				openPdf : openPdf,
				getAllReport : getAllReport
			};
		}();
		ko.applyBindings(model.dashboardFunctions);
		model.dashboardFunctions.onLoad();
		/*------------------------------------------------------------------------------------------
		 *-------------------------------------KNOCKOUT CODE ENDS------------------------------------
		 *--------------------------------------------------------------------------------------------
		 */
		});
	</script>
<div class="row">
	<div class="col-md-12">
		<div class="row">
			<div class="report-search">
				<div class="col-sm-6"></div>
				<div class="col-sm-6">
					<div class="row">
						<div class="col-sm-2"></div>
						<div class="col-sm-5">
							<label id="dateprint"> Reports as of : <span>${asofdate}</span></label>
							<!-- -------------------------- -->

						</div>
						<div class="col-sm-5">
							<div class="dropdown">
								<dt>
									<a href="#"> <span class="hida"> Report Settings <i
											class="entypo-down-open"></i>
									</span>
										<p class="multiSel"></p>
									</a>
								</dt>

								<dd>
									<div class="reportFilter">
										<ul style="height: 300px;">
											<li><a href="#" data-target="#reportRangeModal"
												onclick="setDateRangePicker()" id="openReportRange"
												data-toggle="modal" class=""> Date Range </a></li>
											<!-- ko foreach : reportList -->
											<li><input type="checkbox"
												data-bind="checked : reportCheck()[ko.toJS(category)] " />
												<span data-bind="text : reportDesc"></span></li>
											<!-- /ko -->
										</ul>
									</div>
								</dd>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<div class="row reports">
			<ul id="sortable">
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)" onmouseup="suffleChktoggleUp(event)"
				data-bind="visible : reportCheck()['poscp'],attr : {'id' : 'poscp'}">
					<div id="Counterparty">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Positions by CP</div>
								<div class="panel-options">
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-download"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><span class="badge"><b>Download As:</b></span></li>
											<ul>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=PositionbyCounterpartyExcel" />"><i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;Excel
												</a></li>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=PositionbyCounterpartyPdf" />"><i class="fa fa-file-pdf-o"></i>&nbsp;&nbsp;PDF
												</a></li>
											</ul>
										</ul>
									</div>
									<a data-target="#PositionbyCounterpartyModel" type="button"
										class="bg" data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" class="bg"><i class="entypo-arrows-ccw"
										id="PositionbyCounterpartyRefresh"></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
											<li><span class="badge"><b>Change chart view
														to:</b></span></li>
											<ul>
												<li><label><input id="poscp-chart-view1"
														name="posprod-chart-view" type="radio">Bar Chart</label></li>
												<!-- <li>
                                            <label><input id="poscp-chart-view2" name="posprod-chart-view" type="radio">Line Chart</label>
                                        </li> -->
											</ul>
										</ul>
									</div>
								</div>
							</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="PositionbyCounterpartyChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto">
										</div>
									</div>
								</div>
							</div>
						<!-- /.panel -->
					</div>
				</li>
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['posprd'],attr : {'id' : 'posprd'}">
					<div id="Counterparty">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Positions by Product</div>
								<div class="panel-options">
									<%--  <a id="downloadbut" href="<c:url value='assets/sampledata/PositionbyCounterparty.csv' /> " type="button" class="bg"data-toggle="" data-placement="top"  data-original-title="" >
                                          <i class="entypo-download"></i>
                                    </a> --%>
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-download"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><span class="badge"><b>Download As:</b></span></li>
											<ul>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=PositionbyCounterpartyExcel" />"><i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;Excel
												</a></li>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=PositionbyCounterpartyPdf" />"><i class="fa fa-file-pdf-o"></i>&nbsp;&nbsp;PDF
												</a></li>
											</ul>
										</ul>
									</div>
									<a data-target="#PositionbyCounterpartyAccTypeModal" type="button"
										class="bg" data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" class="bg"><i class="entypo-arrows-ccw"
										id="PositionbyCounterpartyAccTypeRefresh"
										></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><label><input type="checkbox">Allow
													auto refresh</label></li>
											<li><span class="badge"><b>Change chart view
														to:</b></span></li>
											<ul>
												<li><label><input id="posprod-chart-view1"
														name="posprod-chart-view" type="radio">Bar Chart</label></li>
												<!--  <li>
                                            <label><input id="posprod-chart-view2" name="posprod-chart-view" type="radio">Line Chart</label>
                                        </li> -->
											</ul>
										</ul>
									</div>
								</div>
							</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="PositionbyCounterpartyAccTypeChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
							</div>
							<!-- <div class="loaddiv1"></div> -->
						</div>
						<!-- /.panel -->
					</div>
				</li>
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['poscurr'],attr : {'id' : 'poscurr'}">
					<div id="Counterparty">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Positions by Currency</div>
								<div class="panel-options">
									<%-- <a id="downloadbut" href="<c:url value='assets/sampledata/PositionbyCounterparty.csv' /> " type="button" class="bg"data-toggle="" data-placement="top"  data-original-title="" >
                                          <i class="entypo-download"></i>
                                    </a> --%>
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-download"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><span class="badge"><b>Download As:</b></span></li>
											<ul>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=PositionbyCounterpartyExcel" />"><i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;Excel
												</a></li>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=PositionbyCounterpartyPdf" />"><i class="fa fa-file-pdf-o"></i>&nbsp;&nbsp;PDF
												</a></li>
											</ul>
										</ul>
									</div>
									<a data-target="#PositionbyCounterpartyCurrencyModal" type="button"
										class="bg" data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" class="bg"><i class="entypo-arrows-ccw"
										id="PositionbyCounterpartyCurrencyRefresh" ></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
											<li><span class="badge"><b>Change chart view
														to:</b></span></li>
											<ul>
												<li><label><input id="poscurr-chart-view1"
														name="posprod-chart-view" type="radio">Bar Chart</label></li>
												<!-- <li>
                                            <label><input id="poscurr-chart-view2" name="posprod-chart-view" type="radio">Line Chart</label>
                                        </li> -->
											</ul>
										</ul>
									</div>
								</div>
							</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="PositionbyCounterpartyCurrencyChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
							</div>
							<!-- <div class="loaddiv2"></div> -->
						</div>
						<!-- /.panel -->
					</div>
				</li>
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['masteraggr'],attr : {'id' : 'masteraggr'}">
					<div id="MasterAggrementFinal">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Master Agreement</div>
								<div class="panel-options">
									<%--  <a id="downloadbut" href="<c:url value='assets/sampledata/PositionbyCounterparty.csv' /> " type="button" class="bg"data-toggle="" data-placement="top"  data-original-title="" >
                                          <i class="entypo-download"></i>
                                    </a> --%>
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-download"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><span class="badge"><b>Download As:</b></span></li>
											<ul>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=MasterAgreementReportExcel" />"><i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;Excel
												</a></li>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=MasterAgreementReportPdf" />"><i class="fa fa-file-pdf-o"></i>&nbsp;&nbsp;PDF
												</a></li>
											</ul>
										</ul>
									</div>
									<a data-target="#MasterAgreementReportModal" type="button"
										class="bg" data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" data-rel="reload" class="bg"><i
										class="entypo-arrows-ccw"
										id="MasterAgreementReportRefresh" ></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
											<li><span class="badge"><b>Change chart view
														to:</b></span></li>
											<ul>
												<li><label><input id="master-chart-view1"
														name="master-chart-view" type="radio">Bar Chart</label></li>
												<!-- <li>
                                            <label><input id="poscurr-chart-view2" name="posprod-chart-view" type="radio">Line Chart</label>
                                        </li> -->
											</ul>
										</ul>
									</div>
								</div>
							</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="MasterAgreementReportChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
							</div>
						</div>
						<!-- /.panel -->
					</div>
				</li>
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['riskcashflow'],attr : {'id' : 'riskcashflow'}">
					<div id="RiskCashFlowAnalysis">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Risk Cash Flow</div>
								<div class="panel-options">
									<!-- <a id="downloadbut" href="assets/sampledata/VarReport.csv" type="button" class="bg"data-toggle="" data-placement="top" title="Download Report As Csv" data-original-title="" >
                                          <i class="entypo-download"></i>
                                    </a> -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-download"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><span class="badge"><b>Download As:</b></span></li>
											<ul>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=RiskCashFlowAnalysisExcel" />"><i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;Excel
												</a></li>
												<li><a
													href="<c:url value="/getReports/downloadreportinxlsorpdf?downloadFileFormat=RiskCashFlowAnalysisPdf" />"><i class="fa fa-file-pdf-o"></i>&nbsp;&nbsp;PDF
												</a></li>
											</ul>
										</ul>
									</div>
									<a data-target="#RiskCashFlowAnalysisModal" type="button" class="bg"
										data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" data-rel="reload" class="bg"><i
										class="entypo-arrows-ccw"></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="RiskCashFlowAnalysisChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
							</div>
						</div>
						<!-- /.panel -->
					</div>
				</li>
				<!-- <li class="col-lg-4 col-sm-6"
								onmousedown="suffleChktoggle(event)"
								onmouseup="suffleChktoggleUp(event)">
								<div id="CashBalance">
									<div class="panel panel-default">
										<div class="panel-heading">
											<div class="panel-title">Cash Balances</div>
											<div class="panel-options">
												<a id="downloadbut"
													href="#"
													type="button" class="bg" data-toggle=""
													data-placement="top" 
													data-original-title=""> <i class="entypo-download"></i>
												</a> <a data-target="#CashBalancesModal" type="button"
													class="bg" data-toggle="modal" data-placement="top"
													title="View Detailed Report" data-original-title=""> <i
													class="entypo-doc-text-inv"></i>
												</a> <a href="#" data-rel="reload" class="bg"><i
													class="entypo-arrows-ccw"></i></a>
												Single button
												<div class="btn-group">
													<a class="btn btn-sm bg btn-white dropdown-toggle"
														data-toggle="dropdown"> <i class="entypo-cog"></i>
													</a>
													<ul class="dropdown-menu" role="menu">
														<li class="divider"></li>
														<li><a href="#"> <input type="checkbox">
																Allow auto refresh
														</a></li>
													</ul>
												</div>
											</div>
										</div>
										/.panel-heading
										<div class="panel-body">
											<div class="row">
												<div class="col-sm-12">
													<div id="cashbalancesbar"
														style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
												</div>
											</div>
											/.table-responsive
										</div>
										/.panel-body
									</div>
								</div>
							</li> -->
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['cashupcoming'],attr : {'id' : 'cashupcoming'}">
					<div id="CashUpcoming">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Cash Upcoming</div>
								<div class="panel-options">
									<a id="downloadbut"
										href="assets/sampledata/Cash_Cash Balances_SS.xls"
										type="button" class="bg" data-toggle="" data-placement="top"
										data-original-title=""> <i class="entypo-download"></i>
									</a> <a data-target="#CashUpcomingModal" type="button" class="bg"
										data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" data-rel="reload" class="bg"><i
										class="entypo-arrows-ccw"></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
										</ul>
									</div>
								</div>
							</div>
							<!-- /.panel-heading -->
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="CashUpcomingChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
								<!-- /.table-responsive -->
							</div>
							<!-- /.panel-body -->
						</div>
					</div>
				</li>
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['cashdailychange'],attr : {'id' : 'cashdailychange'}">
					<div id="CashDailyChangeId">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Cash Daily Change</div>
								<div class="panel-options">
									<a id="downloadbut" href="#" type="button" class="bg"
										data-toggle="" data-placement="top"
										title="Download Report As Csv" data-original-title=""> <i
										class="entypo-download"></i>
									</a> <a data-target="#CashDailyChangeModal" type="button"
										class="bg" data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" data-rel="reload" class="bg"><i
										class="entypo-arrows-ccw"></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
										</ul>
									</div>
								</div>
							</div>
							<!-- /.panel-heading -->
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="CashDailyChangeChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
								<!-- /.table-responsive -->
							</div>
							<!-- /.panel-body -->
						</div>
					</div>
				</li>
				<li class="col-sm-8" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['cashbyclearer'],attr : {'id' : 'cashbyclearer'}">
					<div id="CashByClearer2">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Cash By Currency & Clearer (Drilldown)</div>
								<div class="panel-options">
									<a id="downloadbut" href="#" type="button" class="bg"
										data-toggle="" data-placement="top"
										title="Download Report As Csv" data-original-title=""> <i
										class="entypo-download"></i>
									</a> <a data-target="#CashByClearerModal" type="button"
										class="bg" data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" class="bg"><i id="Report_CashByClearerRefresh"
										class="entypo-arrows-ccw"></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
										</ul>
									</div>
								</div>
							</div>
							<!-- /.panel-heading -->
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="CashByClearerChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
								<!-- /.table-responsive -->
							</div>
							<!-- /.panel-body -->
						</div>
					</div>
				</li>
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['aging'],attr : {'id' : 'aging'}">
					<div id="AgingReport">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Aging Report</div>
								<div class="panel-options">
									<a id="downloadbut" href="../sampledata/Aging-Report.csv"
										type="button" class="bg" data-toggle="" data-placement="top"
										data-original-title=""> <i class="entypo-download"></i>
									</a> <a data-target="#AgingReportModal" type="button" class="bg"
										data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" data-rel="reload" class="bg"><i
										class="entypo-arrows-ccw"></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
										</ul>
									</div>
								</div>
							</div>
							<!-- /.panel-heading -->
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="AgingReportChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>


								<!--  /.table-responsive -->
							</div>

							<!-- /.panel-body -->
						</div>
					</div>
				</li>
				<li class="col-lg-4 col-sm-6" onmousedown="suffleChktoggle(event)"
					onmouseup="suffleChktoggleUp(event)" data-bind="visible : reportCheck()['tradefailures'],attr : {'id' : 'tradefailures'}">
					<div id="TradeFailures">
						<div class="panel panel-default">
							<div class="panel-heading">
								<div class="panel-title">Trade Failures</div>
								<div class="panel-options">
									<a id="downloadbut" href="../sampledata/TradeFailures.csv"
										type="button" class="bg" data-toggle="" data-placement="top"
										data-original-title=""> <i class="entypo-download"></i>
									</a> <a data-target="#TradeFailuresModal" type="button" class="bg"
										data-toggle="modal" data-placement="top"
										title="View Detailed Report" data-original-title=""> <i
										class="entypo-doc-text-inv"></i>
									</a> <a href="#" data-rel="reload" class="bg"><i
										class="entypo-arrows-ccw"></i></a>
									<!-- Single button -->
									<div class="btn-group">
										<a class="btn btn-sm bg btn-white dropdown-toggle"
											data-toggle="dropdown"> <i class="entypo-cog"></i>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li class="divider"></li>
											<li><a href="#"> <input type="checkbox">
													Allow auto refresh
											</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-sm-12">
										<div id="TradeFailuresChart"
											style="min-width: 210px; width: 100%; height: 300px; margin: 0 auto"></div>
									</div>
								</div>
							</div>
						</div>
						<!-- /.panel -->
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>